import React, { useState } from "react";

interface CountLabelProps {
  count: number;
}
const CountLabel: React.FC<CountLabelProps> = ({ count }) => {
  const [prevCount, setPrevCount] = useState(count);
  const [trend, setTrend] = useState<string | null>(null);

  if (prevCount !== count) {
    console.log({ prevCount, count });
    setPrevCount(count);
    setTrend(count > prevCount ? "增加" : "减少");
  }

  return (
    <>
      <h1>
        新的值{count}，旧的值{prevCount}
      </h1>
      {trend && <p>计数是{trend}</p>}
    </>
  );
};

function Count() {
  const [count, setCount] = useState(0);

  return (
    <>
      <button onClick={() => setCount(count + 1)}>増加</button>
      &nbsp;
      <button onClick={() => setCount(count - 1)}>减少</button>
      <CountLabel count={count} />
    </>
  );
}

export default Count;
